<template>
	<page-wrapper :page-path="'/pages/category/category'" navTitle="分类管理" :navBackgroundColor="primaryColor"
		:navTitleStyle="navTitleStyle">
		<view class="category-container">
			<!-- 顶部切换 -->
			<view class="tab-header">
				<view class="tab-item" :class="{ active: activeTab === 'expense' }" @click="switchTab('expense')">
					支出分类
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'income' }" @click="switchTab('income')">
					收入分类
				</view>
			</view>

			<!-- 搜索筛选区 -->
			<view class="search-filter">
				<view class="search-box">
					<uni-icons type="search" size="20" color="#999"></uni-icons>
					<input type="text" v-model="searchForm.name" placeholder="搜索分类名称" @input="handleSearch" />
				</view>
				<view class="my-category-switch">
					<switch :checked="showMyCategories"  @change="toggleMyCategories" color="#FF9757"  style="transform: scale(0.8);"/>
					<text>我的分类</text>
				</view>
			</view>

			<!-- 分类列表 -->
			<swiper class="category-list" :current="currentPage" :indicator-dots="false" @change="handlePageChange" :duration="300" :previous-margin="'30rpx'" :next-margin="'30rpx'">
				<swiper-item v-for="(page, pageIndex) in categoryPages" :key="pageIndex">
					<scroll-view scroll-y="true" class="category-page" :show-scrollbar="false">
						<view v-if="loading" class="loading-container">
							<uni-icons type="spinner-cycle" size="30" color="#999"></uni-icons>
							<text class="loading-text">加载中...</text>
						</view>

						<template v-else>
							<view v-if="categoryList.length === 0" class="empty-container">
								<image class="empty-image" src="/static/images/empty.png" mode="aspectFit"></image>
								<text class="empty-text">暂无分类数据</text>
							</view>

							<view class="category-group" v-else>
								<view class="category-items">
									<!-- 添加分类按钮始终显示在第一位 -->
									<view class="category-item add-item" @click="showAddModal" v-if="showMyCategories">
										<view class="add-icon">
											<uni-icons type="plus" size="24" color="#5E81F4"></uni-icons>
										</view>
										<text class="add-text">添加分类</text>
									</view>

									<template v-if="page && page.length > 0">
										<view v-for="(item, index) in page" :key="item.id" class="category-item">
											<!-- 第一层：图标和操作按钮 -->
											<view class="item-top">
												<view class="category-icon"
													:style="{ backgroundColor: item.color + '20' }">
													<image :src="item.icon" mode="aspectFit" class="icon-image"></image>
												</view>
												<view class="category-actions" v-if="item.userId === currentUserId">
													<view class="action-btn edit" @click="editCategory(item)">
														<uni-icons type="compose" size="20" color="#5E81F4"></uni-icons>
													</view>
													<view class="action-btn delete" @click="confirmDelete(item)">
														<uni-icons type="trash" size="20" color="#FF5A5F"></uni-icons>
													</view>
												</view>
											</view>

											<!-- 第二层：状态开关 -->
											<view class="item-middle">
												<view class="category-status">
													<text>{{ item.status === 1 ? '启用' : '禁用' }}</text>
													<switch :checked="item.status === 1" @change="toggleStatus(item)"
														color="#5E81F4" :disabled="item.userId !== currentUserId"
														style="transform: scale(0.6);" />
												</view>
											</view>

											<!-- 第三层：名称 -->
											<view class="item-bottom">
												<text class="category-name" :style="{ color: item.color }">{{ item.name
												}}</text>
											</view>
										</view>
									</template>
								</view>
							</view>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>

			<!-- 分页指示点 -->
			<view class="page-indicator"
				v-if="categoryPages.length > 1 || (categoryList.length > 0 && showMyCategories && categoryList.length > 8)">
				<view v-for="(_, index) in categoryPages" :key="index" class="indicator-dot"
					:class="{ active: index === currentPage }"></view>
			</view>

			<!-- 添加/编辑分类弹窗 -->
			<uni-popup ref="categoryModal" type="center" style="z-index: 999;">
				<view class="modal-content">
					<view class="modal-header">
						<text class="modal-title">{{ isEdit ? '编辑分类' : '添加分类' }}</text>
						<view class="close-btn" @click="closeModal">
							<uni-icons type="close" size="20" color="#999"></uni-icons>
						</view>
					</view>

					<view class="modal-body">
						<view class="form-item">
							<text class="form-label">分类名称</text>
							<input class="form-input" v-model="categoryForm.name" placeholder="请输入分类名称"
								maxlength="10" />
						</view>

						<view class="form-item">
							<text class="form-label">分类图标</text>
							<upload-file ref="uploadFile" v-model="categoryForm.icon"
								folder-path="APP/PiggyBank/classify" placeholder="点击选择图标" :size="160" :image-only="true"
								:max-size="2" @change="handleFileChange" />
						</view>

						<view class="form-item">
							<text class="form-label">分类颜色</text>
							<view class="color-selector">
								<view v-for="(color, idx) in colorOptions" :key="idx" class="color-option"
									:style="{ backgroundColor: color }"
									:class="{ active: categoryForm.color === color }" @click="selectColor(color)">
								</view>
							</view>
						</view>

						<view class="form-item">
							<text class="form-label">分类类型</text>
							<view class="type-selector">
								<view class="type-option" :class="{ active: categoryForm.spend === 1 }"
									@click="selectType(1)">
									<text>支出</text>
								</view>
								<view class="type-option" :class="{ active: categoryForm.spend === 0 }"
									@click="selectType(0)">
									<text>收入</text>
								</view>
							</view>
						</view>
					</view>

					<view class="modal-footer">
						<view class="btn cancel-btn" @click="closeModal">取消</view>
						<view class="btn confirm-btn" @click="saveCategory">确认</view>
					</view>
				</view>
			</uni-popup>

			<!-- 删除确认弹窗 -->
			<uni-popup ref="deletePopup" type="dialog">
				<uni-popup-dialog type="warning" title="删除分类" content="确定要删除该分类吗？删除后无法恢复。" :before-close="true"
					@confirm="confirmDeleteCategory" @close="closeDeletePopup"></uni-popup-dialog>
			</uni-popup>
		</view>
	</page-wrapper>
</template>

<script>
import { queryCategories, addCategory, updateCategory, deleteCategory, toggleCategoryStatus } from '@/api/category.js';
import { getUserInfo } from '@/api/user.js';
import { themeMixin } from '@/utils/theme.js';
import PageWrapper from '@/components/page-wrapper/page-wrapper.vue';
import UploadFile from '@/components/upload-file/upload-file.vue';

export default {
	components: {
		PageWrapper,
		UploadFile
	},
	mixins: [themeMixin],
	data() {
		const currentUserId = uni.getStorageSync('userId') || null;
		return {
			navTitleStyle: {
				color: '#FFFFFF'
			},
			activeTab: 'expense', // 当前激活的标签页：expense-支出，income-收入
			categoryList: [], // 分类列表
			loading: true, // 加载状态
			refreshing: false, // 下拉刷新状态
			isEdit: false, // 是否为编辑模式
			currentCategory: null, // 当前正在编辑的分类
			currentUserId: currentUserId, // 当前用户ID

			// 搜索表单
			searchForm: {
				name: '', // 分类名称
				spend: 1, // 1-支出，0-收入
				userId: null, // 用户ID，用于筛选自己的分类
				page: 1,
				pageSize: 10
			},

			// 分页信息
			pagination: {
				current: 1,
				pages: 1,
				total: 0
			},

			categoryForm: {
				name: '',
				icon: '',
				color: '#5E81F4',
				spend: 1, // 1-支出，0-收入
				status: 1,
				userId: null // 添加时设置当前用户ID
			},

			// 颜色选项
			colorOptions: [
				'#5E81F4', '#F5A623', '#4CAF50', '#9C27B0', '#FF5A5F',
				'#607D8B', '#00BCD4', '#FF9800', '#795548', '#3F51B5'
			],

			hasMore: false, // 是否有更多数据
			showMyCategories: true, // 是否只显示我的分类
			currentPage: 0, // 当前页码
			itemsPerPage: 8, // 每页显示的数量（3x3-1，减去新增按钮占位）
			selectedFile: null, // 用于存储选择的文件信息
		}
	},
	computed: {
		// 获取状态标签
		getStatusLabel() {
			return (status) => {
				const option = this.statusOptions.find(item => item.value === status);
				return option ? option.label : '全部';
			}
		},
		categoryPages() {
			if (!this.categoryList.length && !this.showMyCategories) return [[]];

			const pages = [];
			let currentPageItems = [];

			// 固定每页显示9个项目（3x3网格）
			const itemsPerPage = 9;

			// 如果是"我的分类"，需要考虑新增按钮占位
			const effectiveItemsPerPage = this.showMyCategories ? itemsPerPage - 1 : itemsPerPage;

			for (let i = 0; i < this.categoryList.length; i++) {
				currentPageItems.push(this.categoryList[i]);

				if (currentPageItems.length === effectiveItemsPerPage || i === this.categoryList.length - 1) {
					pages.push([...currentPageItems]);
					currentPageItems = [];
				}

			}

			// 如果最后一页不足，也添加进去
			if (currentPageItems.length > 0) {
				pages.push(currentPageItems);
			}

			// 如果是空数组且是"我的分类"，至少返回一个空页面以显示添加按钮
			if (pages.length === 0 && this.showMyCategories) {
				return [[]];
			}

			return pages;
		}
	},
	async onLoad() {
		await this.getCurrentUser();
		// 首次加载时传入 true，表示需要刷新加载
		this.fetchCategoryList(true);
	},
	methods: {
		// 获取当前用户信息
		async getCurrentUser() {
			try {
				const res = await getUserInfo();
				console.log(res);
				if (res.data && (res.data.code === 200 || res.data.code === 1)) {
					this.currentUserId = res.data.data.id;
					this.searchForm.userId = this.currentUserId;
					this.categoryForm.userId = this.currentUserId;
				} else {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取用户信息失败:', error);
				uni.showToast({
					title: '获取用户信息失败',
					icon: 'none'
				});
			}
		},

		// 获取分类列表
		async fetchCategoryList(isRefresh = false) {
			if (!this.currentUserId) {
				await this.getCurrentUser();
			}

			if (isRefresh) {
				this.searchForm.page = 1;
				this.currentPage = 0; // 重置当前页码
			}

			this.loading = isRefresh; // 仅在刷新时显示加载指示器

			try {
				// 根据是否为"我的分类"确定每页实际显示数量
				const itemsPerPage = this.showMyCategories ? 8 : 9;

				const params = {
					...this.searchForm,
					spend: this.activeTab === 'expense' ? 1 : 0,
					userId: this.showMyCategories ? this.currentUserId : null,
					page: this.searchForm.page,
					pageSize: itemsPerPage * 2 // 每次请求两页数据
				};

				const res = await queryCategories(params);
				if (res.data && (res.data.code === 200 || res.data.code === 1)) {
					const { records, total, size, current, pages } = res.data.data;

					if (isRefresh) {
						// 刷新时替换数据
						this.categoryList = records || [];
					} else {
						// 加载更多时追加数据
						this.categoryList = [...this.categoryList, ...(records || [])];
					}

					// 更新分页信息
					this.pagination = {
						current,
						pages,
						total
					};

					// 判断是否还有更多数据
					this.hasMore = current < pages;
				} else {
					uni.showToast({
						title: '获取分类失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取分类列表失败:', error);
				uni.showToast({
					title: '获取分类失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},

		// 处理分页变化
		handlePageChange(e) {
			const currentIndex = e.detail.current;
			this.currentPage = currentIndex;

			// 计算当前已显示的项目数
			const itemsPerPage = this.showMyCategories ? 8 : 9;
			const displayedItems = (currentIndex + 1) * itemsPerPage;

			// 如果已显示的项目数接近或超过已加载的数据量，且还有更多数据可加载
			if (displayedItems >= this.categoryList.length - itemsPerPage / 2 && this.hasMore) {
				this.searchForm.page += 1;
				this.fetchCategoryList(false); // 加载更多数据而不是刷新
			}
		},

		// 切换标签页（支出/收入）
		switchTab(tab) {
			this.activeTab = tab;
			this.searchForm.spend = tab === 'expense' ? 1 : 0;
			this.searchForm.page = 1;
			this.currentPage = 0;
			this.fetchCategoryList(true);
		},

		// 切换我的分类显示
		toggleMyCategories() {
			this.showMyCategories = !this.showMyCategories;
			this.searchForm.page = 1;
			this.currentPage = 0;
			this.fetchCategoryList(true);
		},

		// 处理搜索
		handleSearch() {
			clearTimeout(this._searchTimer);
			this._searchTimer = setTimeout(() => {
				this.searchForm.page = 1;
				this.currentPage = 0;
				this.fetchCategoryList(true);
			}, 300);
		},

		// 处理上传成功
		handleUploadSuccess(fileUrl) {
			this.categoryForm.icon = fileUrl;
		},

		// 显示添加分类弹窗
		showAddModal() {
			this.isEdit = false;
			this.categoryForm = {
				name: '',
				icon: '',
				color: '#5E81F4',
				spend: this.activeTab === 'expense' ? 1 : 0,
				status: 1,
				userId: this.currentUserId
			};
			this.$refs.categoryModal.open();
		},

		// 显示编辑分类弹窗
		editCategory(category) {
			this.isEdit = true;
			this.currentCategory = category;
			this.categoryForm = {
				id: category.id,
				name: category.name,
				icon: category.icon,
				color: category.color,
				spend: category.spend,
				status: category.status,
				userId: category.userId
			};
			this.$refs.categoryModal.open();
		},

		// 关闭分类弹窗
		closeModal() {
			this.$refs.categoryModal.close();
		},

		// 选择颜色
		selectColor(color) {
			this.categoryForm.color = color;
		},

		// 选择分类类型
		selectType(type) {
			this.categoryForm.spend = type;
		},

		// 处理文件选择变化
		handleFileChange(fileInfo) {
			// 保存文件信息，但不立即上传
			this.selectedFile = fileInfo;
		},

		// 保存分类
		async saveCategory() {
			if (!this.categoryForm.name.trim()) {
				uni.showToast({
					title: '请输入分类名称',
					icon: 'none'
				});
				return;
			}

			try {
				uni.showLoading({
					title: '保存中...',
					mask: true
				});

				// 如果有新选择的文件，先上传
				if (this.selectedFile?.tempFile) {
					try {
						// 获取上传组件的引用
						const uploadComponent = this.$refs.uploadFile;
						// 执行上传
						const fileUrl = await uploadComponent.upload();
						// 更新表单数据
						this.categoryForm.icon = fileUrl;
					} catch (error) {
						uni.hideLoading();
						uni.showToast({
							title: '文件上传失败',
							icon: 'none'
						});
						return;
					}
				}

				// 执行保存操作
				let res;
				if (this.isEdit) {
					res = await updateCategory(this.categoryForm);
				} else {
					res = await addCategory(this.categoryForm);
				}

				if (res.data && (res.data.code === 200 || res.data.code === 1)) {
					uni.showToast({
						title: this.isEdit ? '编辑成功' : '添加成功',
						icon: 'success'
					});
					this.closeModal();
					this.fetchCategoryList(true);
				} else {
					uni.showToast({
						title: res.data?.msg || (this.isEdit ? '编辑失败' : '添加失败'),
						icon: 'none'
					});
				}
			} catch (error) {
				console.error(this.isEdit ? '编辑分类失败:' : '添加分类失败:', error);
				uni.showToast({
					title: this.isEdit ? '编辑失败' : '添加失败',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},

		// 切换分类状态
		async toggleStatus(category) {
			try {
				const res = await toggleCategoryStatus(category.id);
				if (res.data && (res.data.code === 200 || res.data.code === 1)) {
					const index = this.categoryList.findIndex(item => item.id === category.id);
					if (index !== -1) {
						// 直接切换状态
						this.categoryList[index].status = this.categoryList[index].status === 1 ? 0 : 1;
					}

					uni.showToast({
						title: this.categoryList[index].status === 1 ? '已启用' : '已禁用',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: res.data?.msg || '操作失败',
						icon: 'none'
					});
					// 操作失败时刷新列表
					this.fetchCategoryList(true);
				}
			} catch (error) {
				console.error('切换分类状态失败:', error);
				uni.showToast({
					title: '操作失败',
					icon: 'none'
				});
				// 发生错误时刷新列表
				this.fetchCategoryList(true);
			}
		},

		// 确认删除分类
		confirmDelete(category) {
			this.currentCategory = category;
			this.$refs.deletePopup.open();
		},

		// 关闭删除确认弹窗
		closeDeletePopup() {
			this.$refs.deletePopup.close();
		},

		// 确认删除分类
		async confirmDeleteCategory() {
			if (!this.currentCategory) return;

			try {
				const res = await deleteCategory(this.currentCategory.id);
				if (res.data && (res.data.code === 200 || res.data.code === 1)) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					this.$refs.deletePopup.close();
					this.fetchCategoryList(true);
				} else {
					uni.showToast({
						title: res.data?.msg || '删除失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('删除分类失败:', error);
				uni.showToast({
					title: '删除失败',
					icon: 'none'
				});
			}
		}
	}
}
</script>

<style lang="scss">

.category-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: $background-color;
	position: relative;

	// 顶部切换标签
	.tab-header {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		box-shadow: $shadow-small;
		z-index: 10;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: $font-size-medium;
			color: $text-color-light;
			position: relative;

			&.active {
				color: $primary-color;
				font-weight: bold;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 6rpx;
					background-color: $primary-color;
					border-radius: 3rpx;
				}
			}
		}
	}

	// 搜索筛选区
	.search-filter {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		box-shadow: $shadow-small;

		.search-box {
			flex: 1;
			height: 70rpx;
			background-color: #F5F5F5;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-right: 20rpx;

			input {
				flex: 1;
				height: 100%;
				font-size: $font-size-medium;
				margin-left: 10rpx;
			}
		}

		.my-category-switch {
			display: flex;
			align-items: center;
			padding: 0 10rpx;

			text {
				font-size: $font-size-small;
				color: $text-color;
				margin-left: 10rpx;
			}
		}
	}

	// 分类列表
	.category-list {
		flex: 1;
		height: calc(100vh - 240rpx);

		.category-page {
			height: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			.category-group {
				.category-items {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 20rpx;

					.category-item {
						background-color: #FFFFFF;
						border-radius: 16rpx;
						padding: 10rpx;
						display: flex;
						flex-direction: column;
						box-shadow: $shadow-small;
						position: relative;
						height:250rpx;

						// 第一层：图标和操作按钮
						.item-top {
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							margin-bottom: 12rpx;

							// 左侧图标
							.category-icon {
								width: 70rpx;
								height: 70rpx;
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
								overflow: hidden;
								padding: 16rpx;

								.icon-image {
									width: 100%;
									height: 100%;
									object-fit: contain;
								}
							}

							// 右侧操作按钮-竖直排列
							.category-actions {
								display: flex;
								flex-direction: column;
								gap: 8rpx;

								.action-btn {
									width: 44rpx;
									height: 44rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									border-radius: 50%;

									&.edit {
										background-color: rgba($primary-color, 0.1);
									}

									&.delete {
										background-color: rgba($error-color, 0.1);
									}
								}
							}
						}

						// 第二层：状态开关
						.item-middle {
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 5rpx 0;
							border-top: 1rpx solid rgba($border-color, 0.3);
							border-bottom: 1rpx solid rgba($border-color, 0.3);

							.category-status {
								display: flex;
								align-items: center;

								text {
									font-size: 24rpx;
									color: $text-color-light;
									margin-right: 10rpx;
								}
							}
						}

						// 第三层：名称
						.item-bottom {
							padding-top: 5rpx;
							text-align: center;

							.category-name {
								font-size: 28rpx;
								font-weight: 500;
								width: 100%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						// 添加分类按钮样式
						&.add-item {
							border: 2rpx dashed rgba($primary-color, 0.3);
							box-shadow: none;
							justify-content: center;
							align-items: center;
							grid-column: 1;
							grid-row: 1;
							background-color: rgba($primary-color, 0.02);
							min-height: 200rpx;

							.add-icon {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
								background-color: rgba($primary-color, 0.1);
								display: flex;
								justify-content: center;
								align-items: center;
								margin-bottom: 16rpx;
							}

							.add-text {
								font-size: 28rpx;
								color: $primary-color;
								font-weight: 500;
							}

							&:active {
								background-color: rgba($primary-color, 0.05);
							}
						}
					}
				}
			}
		}

		// 加载中
		.loading-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 100rpx 0;

			.loading-text {
				margin-top: 20rpx;
				font-size: $font-size-small;
				color: $text-color-light;
			}
		}

		// 空状态
		.empty-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 100rpx 0;

			.empty-image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 30rpx;
			}

			.empty-text {
				font-size: $font-size-medium;
				color: $text-color-light;
			}
		}

		// 加载更多
		.load-more,
		.no-more {
			text-align: center;
			padding: 30rpx 0;
			color: $text-color-light;
			font-size: $font-size-small;
		}
	}

	// 弹窗样式
	.modal-content {
		width: 650rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;

		.modal-header {
			padding: 30rpx;
			border-bottom: 1rpx solid $border-color;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.modal-title {
				font-size: $font-size-large;
				font-weight: bold;
				color: $text-color;
			}

			.close-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.modal-body {
			padding: 30rpx;

			.form-item {
				margin-bottom: 30rpx;

				.form-label {
					font-size: $font-size-medium;
					color: $text-color;
					margin-bottom: 16rpx;
					display: block;
				}

				.form-input {
					width: 100%;
					height: 80rpx;
					border: 1rpx solid $border-color;
					border-radius: 8rpx;
					padding: 0 20rpx;
					font-size: $font-size-medium;
					color: $text-color;
				}

				// 图标选择器
				.icon-selector {
					display: flex;
					flex-wrap: wrap;
					margin: 0 -10rpx;

					.icon-option {
						width: 80rpx;
						height: 80rpx;
						margin: 10rpx;
						border: 1rpx solid $border-color;
						border-radius: 8rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						&.active {
							border-color: $primary-color;
							background-color: rgba(94, 129, 244, 0.1);
						}
					}
				}

				// 颜色选择器
				.color-selector {
					display: flex;
					flex-wrap: wrap;
					margin: 0 -10rpx;

					.color-option {
						width: 60rpx;
						height: 60rpx;
						margin: 10rpx;
						border-radius: 50%;
						border: 2rpx solid transparent;

						&.active {
							border-color: $text-color;
							transform: scale(1.1);
						}
					}
				}

				// 类型选择器
				.type-selector {
					display: flex;

					.type-option {
						flex: 1;
						height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 1rpx solid $border-color;
						margin: 0 10rpx;
						border-radius: 8rpx;
						font-size: $font-size-medium;
						color: $text-color;

						&:first-child {
							margin-left: 0;
						}

						&:last-child {
							margin-right: 0;
						}

						&.active {
							border-color: $primary-color;
							background-color: rgba(94, 129, 244, 0.1);
							color: $primary-color;
						}
					}
				}
			}
		}

		.modal-footer {
			padding: 30rpx;
			border-top: 1rpx solid $border-color;
			display: flex;
			justify-content: center;

			.btn {
        flex: 1;
        height: 70rpx;
				border-radius: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: $font-size-medium;
				margin-left: 20rpx;

				&.cancel-btn {
					background-color: #F5F5F5;
					color: $text-color;
				}

				&.confirm-btn {
					background-color: $primary-color;
					color: #FFFFFF;
				}
			}
		}

		.icon-upload {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin-top: 10rpx;

			.preview-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.upload-btn {
				width: 100%;
				height: 100%;
				background-color: #F5F5F5;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				text {
					font-size: $font-size-small;
					color: $text-color-light;
					margin-top: 10rpx;
				}
			}
		}
	}

	// 分页指示点
	.page-indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		background-color: rgba(255, 255, 255, 0.8);
		position: fixed;
		bottom: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
		border-radius: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		width: auto;
		min-width: 120rpx;
		padding: 8rpx 20rpx;

		.indicator-dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #DDDDDD;
			margin: 0 8rpx;
			transition: all 0.3s;

			&.active {
				background-color: $primary-color;
				transform: scale(1.2);
				box-shadow: 0 0 6rpx rgba($primary-color, 0.5);
			}
		}
	}
}
</style>
